<template>
<div class="tabs">
  <at-tabs v-model="activeName" @tab-click="handleClick" type="label-card">
    <at-tab-pane name='first'>
      <span slot="label">恶意代码<i class="at-tabs-num">{{num1}}</i></span>
        恶意代码
    </at-tab-pane>
    <at-tab-pane name='second'>
      <span slot="label">漏洞<i class="at-tabs-num">{{num2}}</i></span>
        漏洞
    </at-tab-pane>
    <at-tab-pane name='third'>
      <span slot="label">违规接入<i class="at-tabs-num">{{num3}}</i></span>
        违规接入
    </at-tab-pane>
    <at-tab-pane name='forth'>
      <span slot="label">网络入侵<i class="at-tabs-num">{{num4}}</i></span>
        网络入侵
    </at-tab-pane>
  </at-tabs>
</div>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second',
        num1:1,
        num2:2,
        num3:3,
        num4:4
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.num1 = this.num1 + 1;
        this.num2 = this.num2 + 1;
        this.num3 = this.num3 + 1;
        this.num4 = this.num4 + 1;
      }
    },
    created(){
        this.num1 = this.num1 + 1;
        this.num2 = this.num2 + 1;
        this.num3 = this.num3 + 1;
        this.num4 = this.num4 + 1;      
    }
  };
</script>
<style>
  /* .tabs{
    margin:20px 20px;
    width: 500px;
  } */
</style>